<template>
    <v-card class="mb-4 elevation-10 card-hover" :style="{ backgroundColor: item.bgColor }"
        @mouseenter="isHovered = true" @mouseleave="isHovered = false">
        <v-card-text class="pa-4">
            <div class="d-flex align-center">
                <!-- 选择框 -->
                <v-checkbox :model-value="isSelected" class="mr-3" density="compact" hide-details :disabled="disabled"
                    @update:model-value="$emit('update:selected', $event)" />
                <!-- 客户和学生卡片组件 -->
                <div class="mr-8 flex-shrink-0">
                    <CustomerAndStudentCard :item="item"  />
                </div>

                <!-- 来源渠道和其他信息 -->
                <div class="flex-grow-1 text-body-2">
                    <div v-if="item.sourceChannel" class="mb-1">
                        <v-icon size="14" class="mr-1 text-grey">mdi-source-branch</v-icon>
                        {{ getChannelLabel(item.sourceChannel) }}
                    </div>
                    <div v-if="item.customer.email" class="mb-1">
                        <v-icon size="14" class="mr-1 text-grey" color="red">mdi-email</v-icon>
                        {{ item.customer.email }}
                    </div>
                    <div v-if="item.customer.address" class="text-caption text-grey-darken-1">
                        <v-icon size="12" class="mr-1 text-grey">mdi-map-marker</v-icon>
                        {{ item.customer.address }}
                    </div>
                </div>
                <!-- 状态 -->
                <div class="flex-grow-1 text-body-2">
                    <v-chip @click="$emit('contact', item, 2)" :color="getDictColor(item.status)" size="small"
                         class="text-body-2 hover-card clickable">
                        {{ getDictLabel(item.status) }}
                    </v-chip>
                </div>

             

                <!-- 时间信息 -->
                <div class="text-caption text-grey-darken-1 mr-4 flex-shrink-0" style="min-width: 80px;">
                    {{ formatDate(item.createTime) }}
                </div>

                <!-- 操作菜单 -->
                <div class="flex-shrink-0">
                    <v-menu :disabled="disabled">
                        <template #activator="{ props }">
                            <v-btn icon="mdi-dots-vertical" size="small" variant="text" :disabled="disabled"
                                v-bind="props" />
                        </template>
                        <v-list>
                            <v-list-item @click="$emit('view-details', item)">
                                <template #prepend>
                                    <v-icon>mdi-eye</v-icon>
                                </template>
                                <v-list-item-title>查看详情</v-list-item-title>
                            </v-list-item>
                            <v-list-item @click="$emit('edit', item)">
                                <template #prepend>
                                    <v-icon>mdi-pencil</v-icon>
                                </template>
                                <v-list-item-title>编辑</v-list-item-title>
                            </v-list-item>
                            <v-list-item @click="$emit('delete', item)">
                                <template #prepend>
                                    <v-icon>mdi-delete</v-icon>
                                </template>
                                <v-list-item-title>删除</v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                </div>
            </div>
        </v-card-text>

        <!-- 悬停操作栏 -->
        <transition name="slide-up" :style="{ backgroundColor: item.bgColor }">
            <div v-if="isHovered && !disabled" class="action-bar" :style="{ backgroundColor: item.bgColor }">
                <div class="d-flex justify-end gap-2 pa-3">
                    <v-btn variant="text" color="primary" prepend-icon="mdi-eye" @click="$emit('view-details', item)">
                        查看详情
                    </v-btn>
                    <v-btn variant="text" color="success" prepend-icon="mdi-pencil" @click="$emit('edit', item)">
                        编辑
                    </v-btn>
                    <v-btn variant="text" color="primary" prepend-icon="mdi-phone" @click="$emit('contact', item,1)">
                        沟通
                    </v-btn>
                </div>
            </div>
        </transition>
    </v-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CustomerStudentRelationModel } from '@/api/customer/customerrelation/CustomerStudentRelationManagementApi';
import CustomerAndStudentCard from './CustomerAndStudentRard.vue';
import { getStorage, setStorage, removeStorage } from '@/utils/storage'
import type { TenantCustomerStatusModel } from '@/api/tenant/customerstatus/TenantCustomerStatusManagementApi';

interface Props {
    item: CustomerStudentRelationModel;
    isSelected: boolean;
    channelData: any[];
    disabled?: boolean;
}

// 定义 props
const props = defineProps<Props>();

// 定义 emits
defineEmits<{
    'update:selected': [value: boolean];
    'view-details': [item: CustomerStudentRelationModel];
    'edit': [item: CustomerStudentRelationModel];
    'delete': [item: CustomerStudentRelationModel];
    'contact': [item: CustomerStudentRelationModel, type: number];
}>();

// 悬停状态
const isHovered = ref(false)

// 获取客户状态名称
function getDictLabel(value: any): string {
    const customerStatus = getStorage('allCustomerStatus') as TenantCustomerStatusModel[];
    const item = customerStatus.find((item) => item.statusCode == value);
    return item?.statusName || '未知';
}

function getDictColor(value: any): string {
    const customerStatus = getStorage('allCustomerStatus') as TenantCustomerStatusModel[];
    const item = customerStatus.find((item) => item.statusCode == value);
    return item?.statusColor || 'primary';
}

// 渠道工具函数
function getChannelLabel(channelId: any): string {
    const channel = props.channelData.find((item: any) => item.id === channelId);
    return channel?.name || channelId;
}

// 日期格式化
function formatDate(date: string | Date | undefined): string {
    if (!date) return '';
    const d = new Date(date);
    if (isNaN(d.getTime())) return '';
    return d.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}
</script>

<style lang="scss" scoped>
.v-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden; // 确保操作栏能正确显示

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}

.v-avatar {
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 操作栏样式
.action-bar {

    // backdrop-filter: blur(10px);
    // border-top: 1px solid rgba(0, 0, 0, 0.05);
}

// 向下展开动画
.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.slide-up-enter-from,
.slide-up-leave-to {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
}

.slide-up-enter-to,
.slide-up-leave-from {
    max-height: 80px;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
}

// 响应式布局优化
@media (max-width: 1200px) {
    .d-flex {
        flex-direction: column;
        align-items: flex-start !important;

        >div {
            margin-bottom: 12px;
            margin-right: 0 !important;
        }
    }

    // 移动设备上的操作栏
    .action-bar {
        .d-flex {
            flex-direction: row !important;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;

            .v-btn {
                flex: 1;
                min-width: 80px;
            }
        }
    }
}

@media (max-width: 768px) {
    .action-bar {
        .d-flex {
            .v-btn {
                font-size: 12px;
                padding: 8px 12px;

                :deep(.v-btn__prepend) {
                    margin-inline-end: 4px;
                }
            }
        }
    }
}
</style>